import React, { Component } from 'react'

export default class Dialog extends Component {
    state = {
        list: [
            {
                title: "运动",
                flag: false
            },
            {
                title: "游戏",
                flag: false
            },
            {
                title: "学习",
                flag: false
            }
        ]
    }
    render() { 
        const { acceptFlag } = this.props
        const { list } = this.state
        return (
            <div className='dialog'>
                <div className='small'>
                    <ul>
                        {
                            list.map((item, index) => {
                                return <li key={index}>
                                    <input checked={item.flag} onChange={(ev) => {
                                        let list = JSON.parse(JSON.stringify(this.state.list))
                                        list[index].flag = ev.target.checked
                                        this.setState({
                                            list
                                        })
                                    }} type="checkbox" />
                                    { item.title }
                                </li>
                            })
                        }
                    </ul>
                    <button onClick={() => {
                        acceptFlag(false)
                    }}>点我关闭</button>
                     <button onClick={() => {
                        acceptFlag(false, this.state.list)
                    }}>确定</button>
                </div>
            </div>
        )
    }
}
